<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spinner Test Page</title>

<script type="text/javascript" src="spinner_files/jquery-1.js"></script>
<script type="text/javascript" src="spinner_files/jquery.js"></script>
<script type="text/javascript" src="spinner_files/ui_002.js"></script>
<script type="text/javascript" src="spinner_files/ui.js"></script>

<style type="text/css">
body
{
	background: #fff;
	font-family: Arial;
}

label {
	float: left;
	margin-right: .5em;
	padding: .15em 0;
	font-weight: bold;
}

.ui-spinner {
	width: 15em;
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid #999;
	background: #FEFEFE url(./images/spinner-bg.gif) repeat-x left bottom;
	padding: 0 5px;
}

.ui-spinner-disabled {
	background: #F4F4F4;
	color: #CCC;
}

.ui-spinner-box {
	width: 90%;
	height: 100%;
	float: left;
	font-size: 125%;
	border: none;
	background: none;
	padding: 0;
}

.ui-spinner-up,
.ui-spinner-down {
	width: 10%;
	height: 50%;
	font-size: 0.5em;
	padding: 0;
	margin: 0;
	z-index: 100;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	right: 0;
	cursor: default;
	border: 1px solid #999;
	border-right: none;
	border-top: none;
}

.ui-spinner-down {
	bottom: 0;
	border-bottom: 0;
}

.ui-spinner-pressed {
	background: #FEFEFE;
}

.ui-spinner-list,
.ui-spinner-listitem {
	margin: 0;
	padding: 0;
}

</style>

<script type="text/javascript">
$(function(){

	var itemList = [
		{url: "http://ejohn.org", title: "John Resig"},
		{url: "http://bassistance.de/", title: "J&ouml;rn Zaefferer"},
		{url: "http://snook.ca/jonathan/", title: "Jonathan Snook"},
		{url: "http://rdworth.org/", title: "Richard Worth"},
		{url: "http://www.paulbakaus.com/", title: "Paul Bakaus"},
		{url: "http://www.yehudakatz.com/", title: "Yehuda Katz"},
		{url: "http://www.azarask.in/", title: "Aza Raskin"},
		{url: "http://www.karlswedberg.com/", title: "Karl Swedberg"},
		{url: "http://scottjehl.com/", title: "Scott Jehl"},
		{url: "http://jdsharp.us/", title: "Jonathan Sharp"},
		{url: "http://www.kevinhoyt.org/", title: "Kevin Hoyt"},
		{url: "http://www.codylindley.com/", title: "Cody Lindley"},
		{url: "http://malsup.com/jquery/", title: "Mike Alsup"}
	];

	var opts = {
		's1': {decimals:2},
		's2': {stepping: 0.25},
		's3': {currency: '$'},
		's4': {},
		's5': {
			//
			// Two methods of adding external items to the spinner
			//
			// method 1: on initalisation call the add method directly and format html manually
			init: function(e, ui) {
				for (var i=0; i<itemList.length; i++) {
					ui.add('<a href="'+ itemList[i].url +'" target="_blank">'+ itemList[i].title +'</a>');
				}
			},

			// method 2: use the format and items options in combination
			format: '%(title) <a href="%(url)" target="_blank">&raquo;</a>',
			items: itemList
		}
	};

	for (var n in opts)
		$("#"+n).spinner(opts[n]);

	$("button").click(function(e){
		var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
		if (ns != null)
			$('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);
	});

});
</script>
</head><div FirebugVersion="1.3.3" style="display: none;" id="_firebugConsole"></div><body data-feedly-processed="yes">

<h1>jQuery UI Spinner Test Page</h1>

<p>This is a visual test page for developers and demonstrates some of the features included in ui.spinner.</p>

<p><label for="s1">Basic: </label>
<div class="ui-spinner"><input autocomplete="off" class="ui-spinner-box" id="s1" value="10" type="text"><button class="ui-spinner-up" type="button">▲</button><button class="ui-spinner-down" type="button">▼</button></div></p>

<p>
<button id="s1-disable">disable</button>
<button id="s1-enable">enable</button>
<button id="s1-destroy">destroy</button>
<button id="s1-create">create</button>
</p>

<hr>

<p><label for="s2">Decimal: </label>
<div class="ui-spinner"><input autocomplete="off" class="ui-spinner-box" id="s2" value="10.25" type="text"><button class="ui-spinner-up" type="button">▲</button><button class="ui-spinner-down" type="button">▼</button></div></p>

<p>
<button id="s2-disable">disable</button>
<button id="s2-enable">enable</button>
<button id="s2-destroy">destroy</button>
<button id="s2-create">create</button>
</p>

<hr>

<p><label for="s3">Currency: </label>
<div class="ui-spinner"><input autocomplete="off" class="ui-spinner-box" id="s3" type="text"><button class="ui-spinner-up" type="button">▲</button><button class="ui-spinner-down" type="button">▼</button></div></p>

<p>
<button id="s3-disable">disable</button>
<button id="s3-enable">enable</button>
<button id="s3-destroy">destroy</button>
<button id="s3-create">create</button>
</p>

<hr>

<p><label for="s4">Data List: </label>
</p><div style="height: 24px;" class="ui-spinner"><ul style="height: 24px;" autocomplete="off" class="ui-spinner-box ui-spinner-list" id="s4">
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 1</li>
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 2</li>
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 3</li>
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 4</li>
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 5</li>
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 6</li>
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 7</li>
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 8</li>
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 9</li>
	<li style="overflow: hidden; height: 24px;" class="ui-spinner-listitem">item 10</li>
</ul><button class="ui-spinner-up" type="button">▲</button><button class="ui-spinner-down" type="button">▼</button></div>

<p>
<button id="s4-disable">disable</button>
<button id="s4-enable">enable</button>
<button id="s4-destroy">destroy</button>
<button id="s4-create">create</button>
</p>

<hr>

<p><label for="s5">Presenters: </label>
</p><div style="height: 24px;" class="ui-spinner"><div style="height: 24px; margin-top: -600px;" autocomplete="off" class="ui-spinner-box ui-spinner-list" id="s5"><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://ejohn.org/" target="_blank">John Resig</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://bassistance.de/" target="_blank">Jörn Zaefferer</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://snook.ca/jonathan/" target="_blank">Jonathan Snook</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://rdworth.org/" target="_blank">Richard Worth</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://www.paulbakaus.com/" target="_blank">Paul Bakaus</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://www.yehudakatz.com/" target="_blank">Yehuda Katz</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://www.azarask.in/" target="_blank">Aza Raskin</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://www.karlswedberg.com/" target="_blank">Karl Swedberg</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://scottjehl.com/" target="_blank">Scott Jehl</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://jdsharp.us/" target="_blank">Jonathan Sharp</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://www.kevinhoyt.org/" target="_blank">Kevin Hoyt</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://www.codylindley.com/" target="_blank">Cody Lindley</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem"><a href="http://malsup.com/jquery/" target="_blank">Mike Alsup</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">John Resig <a href="http://ejohn.org/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Jörn Zaefferer <a href="http://bassistance.de/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Jonathan Snook <a href="http://snook.ca/jonathan/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Richard Worth <a href="http://rdworth.org/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Paul Bakaus <a href="http://www.paulbakaus.com/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Yehuda Katz <a href="http://www.yehudakatz.com/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Aza Raskin <a href="http://www.azarask.in/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Karl Swedberg <a href="http://www.karlswedberg.com/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Scott Jehl <a href="http://scottjehl.com/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Jonathan Sharp <a href="http://jdsharp.us/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Kevin Hoyt <a href="http://www.kevinhoyt.org/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Cody Lindley <a href="http://www.codylindley.com/" target="_blank">»</a></div><div style="overflow: hidden; height: 24px;" class="ui-spinner-dyn ui-spinner-listitem">Mike Alsup <a href="http://malsup.com/jquery/" target="_blank">»</a></div></div><button class="ui-spinner-up" type="button">▲</button><button class="ui-spinner-down" type="button">▼</button></div>

<p>
<button id="s5-disable">disable</button>
<button id="s5-enable">enable</button>
<button id="s5-destroy">destroy</button>
<button id="s5-create">create</button>
</p>

<hr>

</body><script type="text/javascript"><!--
function __RP_Callback_Helper(str, strCallbackEvent, splitSize, func){var event = null;if (strCallbackEvent){event = document.createEvent('Events');event.initEvent(strCallbackEvent, true, true);}if (str && str.length > 0){var splitList = str.split('|');var strCompare = str;if (splitList.length == splitSize)strCompare = splitList[splitSize-1];var pluginList = document.plugins;for (var count = 0; count < pluginList.length; count++){var sSrc = '';if (pluginList[count] && pluginList[count].src)sSrc = pluginList[count].src;if (strCompare.length >= sSrc.length){if (strCompare.indexOf(sSrc) != -1){func(str, count, pluginList, splitList);break;}}}}if (strCallbackEvent)document.body.dispatchEvent(event);}function __RP_Coord_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_Coord_Callback = str;pluginList[index].__RP_Coord_Callback_Left = splitList[0];pluginList[index].__RP_Coord_Callback_Top = splitList[1];pluginList[index].__RP_Coord_Callback_Right = splitList[2];pluginList[index].__RP_Coord_Callback_Bottom = splitList[3];};__RP_Callback_Helper(str, 'rp-js-coord-callback', 5, func);}function __RP_Url_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_Url_Callback = str;pluginList[index].__RP_Url_Callback_Vid = splitList[0];pluginList[index].__RP_Url_Callback_Parent = splitList[1];};__RP_Callback_Helper(str, 'rp-js-url-callback', 3, func);}function __RP_TotalBytes_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_TotalBytes_Callback = str;pluginList[index].__RP_TotalBytes_Callback_Bytes = splitList[0];};__RP_Callback_Helper(str, null, 2, func);}function __RP_Connection_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_Connection_Callback = str;pluginList[index].__RP_Connection_Callback_Url = splitList[0];};__RP_Callback_Helper(str, null, 2, func);}
//--></script></html>